<template>
  <h1>个人简历练习</h1>
  <table border="1">
    <tr>
      <td>照片：</td>
      <td><img :src="person.imgUrl" alt=""></td>
    </tr>
    <tr>
      <td>姓名：</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友：</td>
      <td>
        <ul>
          <li v-for="f in person.friends">{{f}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="loadData">点击加载数据</button>











</template>
<script setup>
  import {ref} from "vue";
  const person = ref({
    name:'',
    age:'',
    imgUrl:'',
    friends:[]
  })
  const loadData = ()=>{
    person.value={
      name:'范传奇',
      age:18,
      imgUrl:'fcq.jpg',
      friends:['张三','李四','王五']

    }
  }

















</script>
<style scoped>

</style>